<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <style>
        .delete{
            text-decoration: line-through;
            color:rgb(141, 141, 141);
            font-style: italic;
        }
    </style>
</head>

<body>
    <div id="app">
        <current-user>
            <template v-slot:default="{user,content}">
                {{ user.firstName }}
                <div>
                    {{content}}
                </div>
            </template>
        </current-user>
        <my-todo :todos="todos">
            <template v-slot:todo="{todo}">
                <span v-if="todo.isComplete">√</span>
                <span v-else>×</span>
                <span :class="{delete:todo.isComplete}">{{todo.text}}</span>
            </template>
        </my-todo>
        
       
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('current-user', {
            data() {
                return {
                    user: {
                        firstName: 'bruce',
                        lastName: 'lee',
                    },
                    msg: {
                        code: 1,
                        text: '哈哈'
                    }
                }
            },
            template: `
            <div>
                <slot v-bind:user="user" v-bind:content="msg">
                    {{user.firstName}}
                </slot>
            </div>
            `
        })
        Vue.component('my-todo', {
            props:['todos'],
            template: `
            <ul>
                <li 
                    v-for="todo in todos"  
                    v-bind:key="todo.text"   
                >
                    <slot name="todo" v-bind:todo="todo">  
                        {{todo.text}}
                    </slot>
                </li>
            </ul>`
        })
        new Vue({
            el: '#app',
            data: {
                todos: [
                    { text: '洗衣服', isComplete: true },
                    { text: '学vue组件', isComplete: false },
                    { text: '学react基础知识', isComplete: false },
                    { text: '学webpack', isComplete: false }
                ]
            },
        })
    </script>
</body>

</html>